<template>
    <div class="app-container">

        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">
                  <el-card  >
                       <template #header>
                            <div class="card-header">
                              <span>试题分类列表</span>
                            </div>
                          </template>
                        <div class="head-container">
                            <el-tree
                                ref="courseTreeRef"
                                class="tree"
                                :data="courseOptions"
                                :props="{ label: 'name', children: 'children' }"
                                :expand-on-click-node="false"
                                node-key="id"
                                highlight-current
                                default-expand-all
                                @nodeClick="handleNodeClick"
                            />
                        </div>
                   </el-card>
            </el-col>

            <!--试题数据-->
            <el-col :span="20" :xs="24">
                <el-card  >

                <!-- 查询条件-->
                <el-form  v-show="state.showSearch" ref="queryRef"  :model="state.queryParams"  :inline="true"  label-width="68px"  >
                    <el-form-item label="试题名称" prop="subject">
                        <el-input
                            v-model="state.queryParams.subject"
                            placeholder="请输入试题名称"
                            clearable
                            style="width: 240px"
                            @keyup.enter="getDataList"
                        />
                    </el-form-item>

                    <el-form-item label="试题类型" prop="questionType">
                        <el-select
                            v-model="state.queryParams.questionType"
                            placeholder="试题类型"
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in question_type"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="试题难度" prop="difficult">
                        <el-select
                            v-model="state.queryParams.difficult"
                            placeholder="试题难度"
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in question_difficulty"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="会员等级" prop="vipLevel">
                        <el-select
                            v-model="state.queryParams.vipLevel"
                            placeholder="会员等级"
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="vip in vipLevelList"
                                :key="vip.id"
                                :label="vip.name"
                                :value="vip.id"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="试题状态" prop="status">
                        <el-select
                            v-model="state.queryParams.status"
                            placeholder="试题状态"
                            clearable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="dict in sys_normal_disable"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 操作按钮 -->
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            v-hasPermi="['system:user:add']"
                            type="primary"
                            plain
                            icon="Plus"
                            @click="handleAdd"
                            >新增</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-hasPermi="['app:question:edit']"
                            type="success"
                            plain
                            icon="Edit"
                            :disabled="state.single"
                            @click="handleUpdate()"
                            >修改</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-hasPermi="['system:user:remove']"
                            type="danger"
                            plain
                            icon="Delete"
                            :disabled="state.multiple"

                            >删除</el-button
                        >
                    </el-col>

                    <el-col :span="1.5">
                        <el-button
                            type="warning"
                            plain
                            icon="Download"
                            >导出</el-button
                        >
                    </el-col>
                </el-row>

                <!-- 显示数据 -->
                <el-table
                v-loading="state.loading"
                :data="state.rows"
                 :default-sort="{ prop: 'id', order: 'descending' }"
                 @sort-change="sortChangeHandle"
                 @selectionChange="selectionChangeHandle">
                    <el-table-column type="selection" width="50" align="center"  />
                    <el-table-column  label="试题编号" width="80" align="center" prop="id"  sortable="custom"/>
                    <el-table-column  label="所属科目" align="left" width="200">
                        <template #default="scope">
                            <b>{{scope.row.subjectName +'/' + scope.row.courseName}}</b>
                        </template>
                    </el-table-column>
                    <el-table-column  label="试题内容" align="left" >
                        <template #default="scope">
                              <div v-html="scope.row.subject"></div>
                        </template>
                    </el-table-column>

                    <el-table-column  label="正确答案" prop="correct" align="center" />

                    <el-table-column  label="试题类型" align="center" width="100"  prop="questionType"  sortable="custom" >
                        <template #default="scope">
                              <dict-tag :options="question_type" :value="scope.row.questionType" />
                        </template>
                    </el-table-column>
                    <el-table-column  label="试题难度" align="center" width="100"  prop="difficult"  sortable="custom" >
                        <template #default="scope">
                            <dict-tag :options="question_difficulty" :value="scope.row.difficult" />
                        </template>
                    </el-table-column>

                    <el-table-column  label="查询等级" align="center"  width="100" prop="vipLevel"  sortable="custom">
                        <template #default="scope">

                            <template v-for="vip in vipLevelList" :key="vip.id" >
                                 <el-tag  v-if="vip.id===scope.row.vipLevel"  type="primary">{{vip.name}}</el-tag>
                            </template>
                        </template>
                    </el-table-column>

                     <el-table-column  label="创建时间" prop="createTime" align="center" width="160"/>


                    <el-table-column
                        label="操作"
                        align="center"
                        width="150"
                        class-name="small-padding fixed-width"
                    >
                        <template #default="scope">

                                <el-button
                                    v-hasPermi="['app:question:edit']"
                                    link
                                    type="primary"
                                    icon="Edit"
                                    @click="handleUpdate(scope.row)"
                                ></el-button>


                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="state.total > 0"
                    v-model:page="state.queryParams.pageNum"
                    v-model:limit="state.queryParams.pageSize"
                    :total="state.total"
                    @pagination="getDataList"
                />


              </el-card>
            </el-col>

        </el-row>


    </div>
</template>

<script lang="ts" setup>
import {IHooksOptions} from '@/hooks/hooksinterface';
import {useCrud} from '@/hooks/hooksservice';
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance,nextTick} from 'vue';
import { ElTree } from 'element-plus';
import {courseTreeApi} from '@/api/app/course/course';
import {allUserLevelApi} from '@/api/app/userlevel';
import {listApi} from '@/api/app/question';
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { sys_normal_disable,question_difficulty,question_type } = proxy!.useDict('sys_normal_disable','question_difficulty','question_type');
const courseTreeRef = ref<InstanceType<typeof ElTree>>();
const courseOptions = ref(undefined);

//会员等级
const vipLevelList=ref([]);

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
    queryApi: listApi,
 	deleteApi: undefined,
    exportApi: undefined,
    // 创建的时候要不要加载数据
    createdIsNeed:true,
 	//主键名称
 	primaryKey:'id',
    //默认排序的列
    order: 'id',
    //降序
    asc: 'descending',
 	queryParams:  {
 		page:1,
 		size:10,
        subjectId:undefined,
        courseId:undefined,
        subject:'',
        difficult:'',
        questionType:'',
        vipLevel:'',
        status: undefined
    }
});

//vue3中叫组合式函数
const { query, getDataList, selectionChangeHandle, sortChangeHandle, resetQuery, deleteHandle, deleteBatchHandle}=useCrud(state);


/** 节点单击事件 */
function handleNodeClick(data: any) {
    console.log(data);
    if(data.subjectId===-1){
        state.queryParams.subjectId = data.id;
        state.queryParams.courseId = -1;
    }else{
        state.queryParams.subjectId = data.subjectId;
        state.queryParams.courseId = data.id;
    }
    console.log(state.queryParams);
    getDataList();
}

//加载树型节点
function initCourseTree(){
    courseTreeApi().then(resp=>{
        console.log(resp);
        courseOptions.value=resp.data;
    });
}

//初始会员等级
function initUserLevel(){
    allUserLevelApi().then(resp=>{
        vipLevelList.value= resp.data;
    });
}

initCourseTree();
initUserLevel();


//添加试题
function  handleAdd(){
    router.push({ path: '/app/question-edit/index'});

}

//修改试题
function handleUpdate(row:any){
    if(row){
        //跳转页面
        router.push({ path: '/app/question-edit/index/'+row.id });
    }else{
        //跳转页面
        router.push({ path: '/app/question-edit/index/'+state.ids[0] });
    }

}

</script>

<style lang="scss" scoped>
    .tree{
        font-size: 16px;
    }
</style>
